<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小飞哥的飞机大战</title>
</head>
<style>
    #game {
        position: relative;
        width: 500px;
        height: 700px;
        border: 1px black solid;
        display: inline-block;
        left: 150px;
        top: 120px;
        background-color: rgb(192, 204, 200);
        float: left;
        z-index: 9999;
        overflow: hidden;
        cursor: pointer;
    }
    
    .box {
        width: 85px;
        height: 70px;
        left: 200px;
        bottom: 100px;
        position: absolute;
        pointer-events: none;
        background: url(./images/mm.png);
    }
    
    .life {
        position: relative;
        bottom: 0px;
        right: 10px;
        margin-top: 50px;
    }
    
    img {
        width: 30px;
        height: 30px;
    }
    
    #game_statuc {
        position: relative;
        top: 100px;
        left: 200px;
    }
    
    #i {
        position: relative;
        width: 500px;
        height: 1650px;
        top: -1000px;
        z-index: -1;
        background-repeat: no-repeat;
    }
    
    .gun_span {
        width: 10px;
        height: 10px;
        background-color: black;
        border-radius: 5px;
        z-index: 999999;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    <!-- 游戏框界面 -->

    <div id="game" @mousemove='myplane_moveByevent' @mousedown="myplane_gun">
        <img id="i" src="./images/bb.jpeg" alt="">
        <div class="box"></div>
        <div v-for="(a,index) in emp" :class="c" style="width: 50px; height: 50px; "></div>
    </div>

    <!-- 游戏状态界面 -->
    <div id="game_statuc">
        <go_cpn></go_cpn>
        <span id="s1" style="font-size: 20px;font-weight: bold; ">准备好了吗？倒计时：</span>
        <h1 id="h1" style="font-size: 60px; display: inline-block;color: red;">{{timee}}</h1>
        <h2>当前关卡：{{k}}</h2>
        <emp-cpn></emp-cpn>
        <h3>获取的分数为：{{score}}</h3>
        <h3>敌机数量：{{eid-1}}</h3>
        <omg_cpn></omg_cpn>
        <ssss :optiones="options"></ssss>
    </div>


    <script src="./vue.min.js"></script>

    <script>
        //敌机数组,后者是前者的数组形式
        let emtplant = [];
        let temp_emtplant = [];
        //敌机动态坐标范围数组
        let position_arr = [];
        // 生命长度数组
        let life_arr = [, , , , , , , ];
        //定义敌机递归数量
        let number = 0;
        //定义子弹数组
        let myplane_guns = [];
        let s = 1;
        //敌机移动定时器
        let enemy_move_postition_setInterval;
        //子弹记录移动定时器
        let myplane_gun_go_setInterval;
        //定义敌机数量
        let eid = 1;
        //定义分值
        let score = 0;
        //定义背景图片下移速度定时器时差
        let background_img_movespeed_time = 120;
        //敌机移动速度定时器时差
        let enemy_movespeed_time = 140;
        //创建敌机时差
        let random_create_enemy_time = 3000;
        //生成敌机中等待Vue与html响应时差
        let await_Vue_html_time = 140;
        //检验我机碰撞掉血定时器时差
        let my_plane_isdie_time = 140;
        //子弹飞速度定时器时差
        let gun_movespeed_time = 140;
        //定义敌机初始化数量数组
        let init_enemy_count_arr = [1];
        //定义背景图片移动定时器
        let background_img_movespeed_time_setInterval;
        //定义子弹是否离开定时器
        let myplane_gun_isleave_setInterval;
        //定义随机创建敌机定时器
        let start_random_create_enemy_setInterval;
        //检验子弹是否离开的时差
        let myplane_gun_isleave_setInterval_time = 1000;
        //倒计时
        let times = 3;
        //定义关卡
        let kk = 1;
        //
        let seid = 1;


        //生命血量组件
        Vue.component('emp-cpn', {
            data: function() {
                return {
                    life: life_arr
                }
            },
            template: `  
                <div class="life">
                    <h2>当前血量</h2>
                    <img v-for="e in life" src="./images/life.png" alt="ssss">
                </div>
            `,
        });

        //定义游戏控制台组件对象一
        let start_game = {
            template: `
                <div>
                    <h1 style="font-size: 50px;  color: rgb(65,180,130);">一起来打飞机^&^</h1>
                    <button id="b1" @click="start">开始游戏</button>
                    <button @click="stop">暂停游戏</button>
                    <button @click="rep_start">重新开始</button>
                </div>
            `,
            methods: {
                start: function() {
                    emtplant = document.getElementsByClassName('enemy')
                    if (emtplant.length > 0) {
                        //启动倒计时
                        main()
                        setTimeout(() => {
                            //开始游戏启动初始化敌机
                            father.init_enemy(emtplant, init_enemy_count_arr);
                            //开始游戏启动随机生成敌机
                            start_random_create_enemy();
                        }, 3500);
                    }
                    document.getElementById('b1').disabled = true;
                },
                stop: function() {
                    alert('快去撒个尿');
                },
                //重新开始游戏
                rep_start: function() {
                    window.location.href = 'index.html'
                }
            }
        };


        //定义外挂组件对象
        let omg = {
            template: `   
            <div>
                <h3>外挂区</h3>
                <button @click="omg_clear_nearestenemy">清除距离最近敌机</button>
                <button @click="omg_clear_arrenemy">清除所有敌机</button>
                <button id="omg1" @click="omg_myplane_boss">无敌状态</button>
                <button id="omg2" @click="myplane_gun_move_left">让子弹左弯</button>
                <button id="omg3" @click="myplane_gun_move_rigth">让子弹右弯</button>
                <button id="omg4" @click="myplane_gun_move_normal">让子弹正常</button>
                </div>
            </div>
            `,
            // <button style="margin-top: 20px;" id="omg5" @click="myplane_img">选择我机长相</button>
            methods: {
                omg_clear_nearestenemy() {
                    for (let f = 0; f < position_arr.length; f++) {
                        if (document.getElementById(f + 1)) {
                            document.getElementById(f + 1).remove()
                            break;
                        }
                    }
                },
                omg_clear_arrenemy() {
                    for (let f = 0; f < position_arr.length; f++) {
                        if (document.getElementById(f + 1)) {
                            document.getElementById(f + 1).remove()
                        }
                    }
                },
                omg_myplane_boss() {

                    if (game_statuc.die_flge) {
                        game_statuc.die_flge = false;
                        document.getElementById('omg1').style.backgroundColor = 'rgb(239,239,239)'
                    } else {
                        game_statuc.die_flge = true;
                        document.getElementById('omg1').style.backgroundColor = 'rgb(245,189,0)'
                    }
                },
                myplane_gun_move_left() {
                    if (game_statuc.myplane_gun_move_flge) {
                        game_statuc.myplane_gun_move_flge_left = false;
                        document.getElementById('omg2').style.backgroundColor = 'rgb(239,239,239)'

                    } else {
                        game_statuc.myplane_gun_move_flge_left = true;
                        game_statuc.myplane_gun_move_flge_right = false;
                        document.getElementById('omg2').style.backgroundColor = 'rgb(245,189,0)'
                        document.getElementById('omg3').style.backgroundColor = 'rgb(239,239,239)'
                    }

                },
                myplane_gun_move_rigth() {
                    if (game_statuc.myplane_gun_move_flge) {
                        game_statuc.myplane_gun_move_flge_right = false;
                        document.getElementById('omg3').style.backgroundColor = 'rgb(239,239,239)'
                    } else {
                        game_statuc.myplane_gun_move_flge_right = true;
                        game_statuc.myplane_gun_move_flge_left = false;
                        document.getElementById('omg3').style.backgroundColor = 'rgb(245,189,0)'
                        document.getElementById('omg2').style.backgroundColor = 'rgb(239,239,239)'
                    }
                },
                myplane_gun_move_normal() {
                    game_statuc.myplane_gun_move_flge_left = false;
                    game_statuc.myplane_gun_move_flge_right = false;
                    document.getElementById('omg2').style.backgroundColor = 'rgb(239,239,239)'
                    document.getElementById('omg3').style.backgroundColor = 'rgb(239,239,239)'
                },
                // myplane_img() {
                //     document.getElementsByClassName('box')[0].style.backgroundImage = "url(" + ['./images/xx.png'][0] + ")";
                // },

            }
        }


        //商店
        Vue.component('ssss', {
            //v-model="selected"
            props: ["optiones"],
            template: `
            <div  style="font-size: 60px; font-weight: bold;"> 商店：
                    <select id='shop'  @change="selected_myplane_img" style="width: 100px; height: 30px; font-weight: bold;">
                       
                        <option  v-for="optiona in optiones" v-bind:disabled="optiona.f" v-bind:class="optiona.class" v-bind:value="optiona.value">
                        {{ optiona.text }}
                    </option>
                    </select>   
                    </div>
                `,
            methods: {
                selected_myplane_img() {


                    shop(this);

                }
            }
        })

        //定义游戏控制台组件
        let game_statuc = new Vue({
            el: '#game_statuc',
            data: {
                score: 0,
                eid: eid,
                die_flge: false, //无敌外挂
                myplane_gun_move_flge_left: false, //子弹左拐
                myplane_gun_move_flge_right: false, //子弹右拐
                timee: times,
                k: kk,
                options: [{
                    text: '战斗机',
                    value: '1',
                    class: 'options'

                }, {
                    text: '口水鸡',
                    value: '2',
                    class: 'options'
                }, {
                    text: '熊二',
                    value: '3',
                    class: 'options'
                }, {
                    text: '胡来',
                    value: '4',
                    class: 'options'
                }]
            },
            //注册游戏控制台组件一
            components: {
                go_cpn: start_game,
                omg_cpn: omg

            }
        })


        //游戏主体Vue实例
        let father = new Vue({
            el: '#game',
            data: {
                c: 'enemy',
                emp: init_enemy_count_arr,

            },
            methods: {
                //我机移动事件
                myplane_moveByevent() {
                    let e1 = event.currentTarget;
                    let e2 = event.target;
                    if (e1 === e2) {
                        let game = document.getElementById('game');
                        let box = document.getElementsByClassName('box')[0];
                        //防止我机在game框外
                        if (event.offsetX >= game.offsetWidth - box.offsetWidth / 2) {
                            box.style.left = game.offsetWidth - box.offsetWidth + 'px'
                        } else if (event.offsetX <= box.offsetWidth / 2) {
                            box.style.left = 0 + 'px';
                        } else {
                            box.style.left = event.offsetX - box.offsetWidth / 2 + 'px';
                        }
                        box.style.top = event.offsetY - box.offsetWidth / 2 + 'px';
                    }
                },

                //初始化敌机
                init_enemy(emtplant, init_enemy_count_arr) {
                    emtplant[0].id = game_statuc.eid
                    let game = document.getElementById('game');
                    temp_emtplant = Array.from(emtplant);
                    //初始化敌机
                    temp_emtplant.forEach((p, i) => {
                        //定义敌机属性
                        p.style.Width = 30 + 'px'
                        p.style.Height = 30 + 'px'
                        p.style.position = "absolute"
                        p.style.backgroundImage = "url(" + ['./images/e.png'][0] + ")";

                        //随机生成坐标
                        let r_X = Math.random() * game.offsetWidth
                        let r_Y = Math.random() * game.offsetHeight
                            //后判断防止占据边框
                        if (game.offsetWidth - p.offsetWidth < r_X) {
                            p.style.left = game.offsetWidth - p.offsetWidth + 'px'
                        } else if (r_X < p.offsetWidth) {
                            p.style.left = p.offsetWidth + 'px'
                        } else {
                            p.style.left = r_X + 'px'
                        }
                        // p.style.top = r_Y - game.offsetHeight + 'px';
                        p.style.top = -50 + 'px';
                        //记录所有敌机完整信息
                        position_arr.push({
                            id: game_statuc.eid,
                            e: p,
                            X: p.offsetLeft,
                            Y: p.offsetTop
                        })
                        game_statuc.eid++;
                    });
                    this.enemy_move_postition(position_arr)
                },

                //敌机移动
                enemy_move_postition() {
                    enemy_move_postition_setInterval = setInterval(() => {
                        position_arr.forEach(p => {
                            // p.Y = p.e.offsetTop
                            p.e.style.top = p.e.offsetTop + 5 + 'px'
                            p.Y = p.e.offsetTop
                        })
                        this.my_plane_and_enemy_isblow();
                        this.enemy_isleave_game();
                    }, enemy_movespeed_time);
                },

                //检验敌机是否离开game
                enemy_isleave_game() {
                    for (let f = 0; f < position_arr.length; f++) {
                        let game = document.getElementById('game');
                        //如果离开就清除-注意清除顺序
                        if (position_arr[f].Y > game.offsetHeight) {
                            // position_arr.splice(f, 1); 
                            // b.splice(f, 1)
                            document.getElementById(f + 1).remove()
                            break;
                        }
                    }
                },

                //随机生成敌机
                random_create_enemy() {
                    /*第一次想法：
                         let game = document.getElementById('game');
                         let Y = position_arr[(first_position_arr_length - 1) * number].Y //+ temp_emtplant[0].offsetHeight; //1、6、11、16 --- 使用初始化数组个数
                         //这里非常离谱，只有0.5和定时器的140毫秒达成共识
                         if (Y >= game.offsetHeight / 2 && Y < game.offsetHeight / 2 + 5) {
                     */
                    /*要什么arr坐标，for和定时器时间差存在区别
                    // for (let r = 0; r < 5; r++) {
                    //     let position_obj = {
                    //         X: Math.random() * game.offsetWidth,
                    //         Y: Math.random() * game.offsetHeight
                    //     }
                    //     arr.push(position_obj);
                    // }
                    // arr.push({})
                    */
                    let game = document.getElementById('game');
                    init_enemy_count_arr.push(1);
                    setTimeout(() => {
                        // b.push(eid);
                        //这里才能放递归计数，定时器最后也不行
                        ++number;
                        let emtplant = document.getElementsByClassName('enemy')
                        temp_emtplant = Array.from(emtplant)

                        let p = temp_emtplant[temp_emtplant.length - 1]
                        p.id = game_statuc.eid;
                        p.style.Width = 30 + 'px'
                        p.style.Height = 30 + 'px'
                        p.style.position = "absolute"
                        p.style.backgroundImage = "url(" + ['./images/e.png'][0] + ")";
                        //先让它有offsetLeft    
                        p.style.left = 300 - p.offsetWidth + 'px';
                        //后判断防止占据边框
                        let r_X = Math.random() * game.offsetWidth
                        let r_Y = Math.random() * game.offsetHeight / 15

                        if (game.offsetWidth - p.offsetWidth < r_X) {
                            // console.log(game.offsetWidth - p.offsetWidth);
                            p.style.left = game.offsetWidth - p.offsetWidth + 'px'
                        } else if (r_X < p.offsetWidth) {
                            p.style.left = p.offsetWidth + 'px'
                        } else {
                            p.style.left = r_X + 'px'
                        }
                        // p.style.top = r_Y + 'px';
                        // p.style.top = r_Y - game.offsetHeight;
                        p.style.top = -50 + 'px';
                        //记录所有敌机完整信息
                        position_arr.push({
                            id: game_statuc.eid,
                            e: p,
                            X: p.offsetLeft,
                            Y: p.offsetTop
                        })
                        game_statuc.eid++;
                        /*
                        第一反应我对这个定时器时间的看法：时间尽量少，不然每次生成temp_emtplant中class=emp的敌机时间会在该方法定时执行的时间上多加该设置的时间，这样波数越多，以后每波现在的敌机数量会少，因为还没走完该定时器整个方法的定时器又开始了
                        第二反应过来，只有当该事件大于该整个方法的定时器执行时间才会导致第一反应，不然不会，因为时间误差在之间。
                        实际：若没有这个定时器和时间大都会导致敌机越来越少
                        */
                    }, await_Vue_html_time);
                },

                //检验我机与敌机是否碰撞
                my_plane_and_enemy_isblow() {
                    let game = document.getElementById('game');
                    let box = document.getElementsByClassName('box')[0];
                    for (let m = 0; m < position_arr.length; m++) {
                        //获取坐标范围
                        let temp_X1 = position_arr[m].X;
                        // let temp_X2 = position_arr[m][1]
                        let temp_Y1 = position_arr[m].Y;
                        // let temp_Y2 = position_arr[m][3]

                        //定义范围
                        //因为我机比敌机大，所以是看敌机在不在我机的坐标范围内,要反过来了
                        let Mx = box.offsetLeft
                        let Dx = box.offsetLeft + box.offsetWidth
                        let My = box.offsetTop
                        let Dy = box.offsetTop + box.offsetHeight

                        if (Mx < temp_X1 && temp_X1 < Dx && My < temp_Y1 && temp_Y1 < Dy) {
                            if (life_arr.length > 1) {
                                if (!game_statuc.die_flge) { //外挂无敌
                                    life_arr.shift();
                                }
                            } else {
                                life_arr.shift();
                                //放在最后一条命还在却提示了
                                setTimeout(() => {
                                    alert('您已机毁人亡！！！');
                                }, my_plane_isdie_time);
                            }
                        }
                    }
                },

                //我机发射子弹
                myplane_gun() {
                    let gun_span = document.createElement('span')
                    let game = document.getElementById('game');
                    let box = document.getElementsByClassName('box')[0];
                    //把子弹追加进html并设置id为了以后清除
                    gun_span.id = s + 'g'
                    game.appendChild(gun_span);
                    let span_g = document.getElementById(s + 'g')
                    span_g.classList.add('gun_span')

                    //初始化子弹坐标
                    span_g.style.left = box.offsetLeft + box.offsetWidth / 2 - 5 + 'px'
                    span_g.style.top = box.offsetTop + 'px';

                    //记录所有子弹id，坐标变化的数组
                    myplane_guns.push({
                        id: s,
                        e: span_g,
                        X: span_g.offsetLeft,
                        Y: span_g.offsetTop
                    });
                    //id自加
                    s++;
                    //让子弹飞
                    this.myplane_gun_go()
                },

                //让我机子弹飞
                myplane_gun_go() {
                    clearInterval(myplane_gun_go_setInterval); //不清除就会让之前的 子弹定时器累加，子弹就会越飞越快
                    myplane_gun_go_setInterval = setInterval(() => { //let var 都不行
                        let span_gbyclass = document.getElementsByClassName('gun_span');
                        myplane_guns.forEach(g => {
                            g.e.style.top = g.e.offsetTop - 5 + 'px'
                            g.Y = g.e.offsetTop

                            // 设置外挂
                            if (game_statuc.myplane_gun_move_flge_left) {
                                g.e.style.left = g.e.offsetLeft - 5 + 'px'
                                g.X = g.e.offsetLeft
                            }
                            if (game_statuc.myplane_gun_move_flge_right) {
                                g.e.style.left = g.e.offsetLeft + 5 + 'px'
                                g.X = g.e.offsetLeft
                            }

                        });

                        //判断子弹和敌机是否碰撞
                        for (let g = 0; g < myplane_guns.length; g++) {
                            for (let e = 0; e < position_arr.length; e++) {
                                // console.log(myplane_guns[g], position_arr[e]);
                                if (position_arr[e].X <= myplane_guns[g].X && myplane_guns[g].X <= position_arr[e].X + 30 && position_arr[e].Y <= myplane_guns[g].Y && myplane_guns[g].Y <= position_arr[e].Y + 30) {
                                    // console.log('击中了');
                                    //让当前子弹和敌机同时消失--还要判断他们是不是存在--因为我是在html中删除了不是在position_arr而我又是用position_arr来检测，所以看到会存在被离开删除的，那自然就不走html中存在也就没有remove了
                                    if (document.getElementById(myplane_guns[g].id + 'g') && document.getElementById(e + 1)) {
                                        document.getElementById(myplane_guns[g].id + 'g').remove()
                                        document.getElementById(e + 1).remove()
                                        game_statuc.score++;

                                        if (game_statuc.score == 5 || game_statuc.score == 10 || game_statuc.score == 15) {
                                            random_create_enemy_time -= 900;
                                            // console.log(random_create_enemy_time);
                                            start_random_create_enemy();
                                        }
                                        if (game_statuc.score == 20) {
                                            random_create_enemy_time = 0
                                        }
                                    }
                                }
                            }
                        }
                    }, gun_movespeed_time);
                },

                //检测我机子弹是否离开
                myplane_gun_isleave() {
                    for (let g = 0; g < myplane_guns.length; g++) {
                        if (myplane_guns[g].Y <= 0) {
                            //要判断是不是已经和敌机同归于尽了
                            if (document.getElementById(myplane_guns[g].id + 'g')) {
                                document.getElementById(myplane_guns[g].id + 'g').remove();
                                //myplane_guns.shift(); //用这个也可以是因为先发射的先离开,但是我没考虑可以在任意地方发射
                                // myplane_guns.splice(g, 1) // 这个是返回删除元素的数组，直接在原数组上改动，不用返回
                            }
                        }
                    }
                }
            }
        })

        //开始游戏启动随机生成敌机
        function start_random_create_enemy() {
            clearInterval(start_random_create_enemy_setInterval);
            start_random_create_enemy_setInterval = setInterval(() => {
                father.random_create_enemy()
            }, random_create_enemy_time);
        }

        //背景自动下滑，这个不需要开始游戏就要下滑，所以不用函数包裹
        background_img_movespeed_time_setInterval = setInterval(() => {
            let game = document.getElementById('game');
            let bg_img = document.getElementById('i');
            if (i.offsetTop >= 0) {
                i.style.top = game.offsetHeight - i.offsetHeight + 'px';
            } else {
                i.style.top = i.offsetTop + 10 + 'px'
            }
        }, background_img_movespeed_time);

        //检测子弹是否离开
        myplane_gun_isleave_setInterval = setInterval(() => {
            father.myplane_gun_isleave();
        }, myplane_gun_isleave_setInterval_time);
        //检验是否购买机型
        setInterval(() => {
            if (game_statuc.score >= 5) {
                document.getElementById('shop').style.backgroundColor = 'rgb(245,189,0)'
            } else {
                document.getElementById('shop').style.backgroundColor = 'rgb(239,239,239)'
            }
        }, 200);

        //闯关换背景
        let aa = setInterval(() => {
            if (game_statuc.score == 20) {
                game_statuc.k++;
                // document.getElementById("i").setAttribute("src", "./images/bbjx.png");
                clearInterval(aa)
            }
        }, 1000);
        //倒计时
        function main() {
            ss = setInterval(() => {
                if (game_statuc.timee > 0) {
                    game_statuc.timee--
                } else {
                    document.getElementById('s1').style.display = 'none'
                    document.getElementById('h1').style.display = 'none'
                }
            }, 1000);
        }
        //检测商店
        function shop(that) {
            if (game_statuc.score >= 5) {
                let options = document.getElementsByClassName('options');
                for (let i = 0; i < options.length; i++) {
                    if (options[i].selected) {
                        if (options[i].value == "1") {

                            document.getElementsByClassName('box')[0].style.backgroundImage = "url(" + ['./images/mm.png'][0] + ")";
                        } else if (options[i].value == "2") {

                            document.getElementsByClassName('box')[0].style.backgroundImage = "url(" + ['./images/cc.png'][0] + ")";
                        } else if (options[i].value == "3") {

                            document.getElementsByClassName('box')[0].style.backgroundImage = "url(" + ['./images/xx.png'][0] + ")";
                        } else {

                            document.getElementsByClassName('box')[0].style.backgroundImage = "url(" + ['./images/hu.png'][0] + ")";
                        }
                    }
                }
                game_statuc.score -= 5;
            } else {
                alert(`还差${5-game_statuc.score}分噢！`);
            }
        }
    </script>
</body>


</html>
<!-- 抖动https://blog.csdn.net/desongzhang/article/details/113609928 -->
<!-- .self 阻止父往子传递事件 -->
<!-- /* 阻止父往子传递事件
let e1 = event.currentTarget;
let e2 = event.target;
console.log(e1 === e2);
if (e1 === e2) {
    加了图片后就不能用.self
    let box = document.getElementsByClassName('box')[0];
    console.log(event.offsetX);
    box.style.left = event.offsetX - box.offsetWidth / 2 + 'px';
    box.style.top = event.offsetY - box.offsetWidth / 2 + 'px';
} -->

<!-- 实例包含两个组件 -->
<!-- 创建敌机采用类的不行因为几个div就几个敌机 -->
<!-- let temp_emtplant 不定义在外面，而是靠参数传会导致一次初始化敌机一次后来增加的敌机，虽然实际上已经是增加后的，但是会影响判断是否已经离开game -->
<!-- 敌机越界后需要移除 -->

<!--  v-on:click="gun" 鼠标点击事件不容许在子元素中 -->
<!-- 删除子元素这个坑死了 //game.removeChild(document.getElementById(myplane_guns[g].id + 'g')) -->
<!-- setTimeout Vuedata数据同步到html的时间比js获取生成的该节点时间慢，必须得用定时器或者异步来等待data数据同步到html，二第一种定时器就可以等待，它会等待主线程完成后再执行，所以我即使把时间设置为0.00001也不能检验，因为只要写了它它就会等主线程完成，生成敌机 -->